<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>文章归档</span>
        <el-button class="button" type="text" :icon="Back" @click="reback">后退</el-button>
      </div>
    </template>
    <el-timeline>
      <el-timeline-item
        :timestamp="blogLog.createTime"
        placement="top"
        v-for="(blogLog, index) in blogLogs"
        :key="index"
      >
        {{ blogLog.blogEvent === '1' ? '下架了' : '发布了' }}
        {{ blogLog.blogEventDesc }}
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :hide-on-single-page="true"
      v-model:currentPage="current"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { Back } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import type { BlogLog } from '@/api/type'
import { getBlogLogs } from '@/api/request'

const total = ref(0)

const current = ref(1)

const blogLogs = ref<BlogLog[]>()

onMounted(() => {
  loadPageBlogLog()
})

const reback = () => {
  history.back()
}

const loadPageBlogLog = async () => {
  const page = await getBlogLogs(current.value)
  blogLogs.value = page.records
  total.value = page.total
}

const handleCurrentChange = (val: number) => {
  current.value = val
  loadPageBlogLog()
}

</script>

<style lang="less" scoped>
.el-card {
  width: 80%;
  margin-left: 10%;
  padding: 0;
}
</style>
